<template>
  <div class="container">
    <div class="header">
      <div class="nav">
      </div>
      <div class="userimg">

        <img :src="user.headerimg" @click="AuthorDetails">
        <p>{{ user.nick }}</p>

      </div>
      <div class="nav">
        <ul>
          <li>
            <el-button @click="toUpload" class="uploadBtn">上传图片</el-button>
          </li>
          <li>
            <el-button @click="toUpload" class="uploadBtn">分享作品</el-button>
          </li>
        </ul>
      </div>
    </div>

    <div class="content">
      <div class="Selected">
        <p>精选</p>
        <div></div>
        <div></div>
        <div></div>
      </div>
      <!-- 瀑布流布局 -->
      <div class="img-wrapper">
        <ul>
          <li v-for="i in listImg" :key="i"><img :src="i" /></li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script setup >
import { ref, onMounted } from "vue";
import { useRouter } from 'vue-router'
// import { useUserStore } from '@/stores/user'
// const store = useUserStore()
const user = store.userInfo //拿到数据然后渲染
const router = useRouter();
const listImg = ref(["https://tse1-mm.cn.bing.net/th/id/OIP-C.F_iAlTyuNc80RkQnFNh3twHaNK?w=187&h=333&c=7&r=0&o=5&dpr=1.1&pid=1.7", "https://ts1.cn.mm.bing.net/th?id=OIP-C.cWj-vHNxJiPyNi3YnZE__wHaKe&w=122&h=169&c=8&rs=1&qlt=90&o=6&dpr=1.1&pid=3.1&rm=2", "https://tse3-mm.cn.bing.net/th/id/OIP-C.igLcCbgtwAjPPhvCS84KugHaQD?w=115&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7", "https://tse4-mm.cn.bing.net/th/id/OIP-C.rB56pYxK3CP4kIx9nsJfLQHaQC?w=115&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7", "https://ts1.cn.mm.bing.net/th?id=OIP-C.Xy_77gg7FpcHlVgu_JBpJwHaNK&w=100&h=169&c=8&rs=1&qlt=90&o=6&dpr=1.1&pid=3.1&rm=2", "https://tse3-mm.cn.bing.net/th/id/OIP-C.BmevVs6TZR74ciEFSnxLEwHaNK?w=187&h=333&c=7&r=0&o=5&dpr=1.1&pid=1.7", "https://ts1.cn.mm.bing.net/th?id=OIP-C.OmXiQQBhD9uVFwPlQCT3egHaEK&w=287&h=165&c=8&rs=1&qlt=90&o=6&dpr=1.1&pid=3.1&rm=2", "https://ts1.cn.mm.bing.net/th?id=OIP-C.Yt-pBYb9SzcpfGaPYGkBqwHaEo&w=270&h=168&c=8&rs=1&qlt=90&o=6&dpr=1.1&pid=3.1&rm=2", "https://tse4-mm.cn.bing.net/th/id/OIP-C.iSo2du3sBG8hV7Z2KaraEAHaNK?w=187&h=333&c=7&r=0&o=5&dpr=1.1&pid=1.7"])

//to作者页
const AuthorDetails = () => {
  router.push({ path: '/portfolios' })
}
//to上传
const toUpload = () => {
  router.push({ path: '/upload' })

}
//瀑布流
window.onload = function () {
  //获取container
  var container = document.getElementsByClassName("itemsbox")
  //获取container的宽度
  var containerWidth = innerWidth

  // 获取每一张需要的图片
  var imgs = document.querySelectorAll("img")
  // 获取图片宽度
  var imgWidth = imgs[0].offsetWidth

  // 获取第一行的图片数量
  var sum = Math.floor(containerWidth / imgWidth)

  // 创建数组储存第一行图片的宽度
  var heightArr = []

  for (var i = 0; i < imgs.length; i++) {
    if (i < sum) {
      // 存入第一行图片的高度
      heightArr.push(imgs[i].offsetHeight)
    } else {
      // 定义最小高度和最小高度图片的索引
      var minHeight = heightArr[0]
      var minIndex = 0

      for (var j = 0; j < heightArr.length; j++) {
        if (heightArr[j] < minHeight) {
          // 更正最小高度和索引
          minHeight = heightArr[j]
          minIndex = j
        }
      }

      // 给后续图片加上定位
      imgs[i].style.position = "absolute"
      imgs[i].style.top = minHeight + "px"
      imgs[i].style.left = imgs[minIndex].offsetLeft + "px"

      // 添加定位后再次修正数组里面的height
      heightArr[minIndex] = heightArr[minIndex] + imgs[i].offsetHeight
    }
  }
}

</script>
<style scoped lang="scss">
.container {

  .header {
    text-align: center;

    .userimg {
      height: 300px;
      width: 100vw;
      background-color: antiquewhite;
      background: url(/img/bg2.jpg);

      img {
        width: 100px;
        border-radius: 30vw;
        margin-top: 50px;
      }

      p {
        font-size: 24px;
        color: white;
      }
    }

    .nav {
      background-color: #494949;
      height: 28px;
      width: 100vw;
      color: white;

      ul {
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;

        li {
          list-style-type: none;
          margin: 0 20px;

          .uploadBtn {
            opacity: 0.7;
            height: 28px;
          }
        }
      }
    }
  }

  .content {

    .Selected {
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      width: 100vw;
      padding: 20px 0 50px 0;
      margin: 0 auto;

      p {
        display: block;
        width: 90vw;
        font-size: 24px;
      }

      div {
        width: 500px;
        height: 300px;
        background-color: #f0f0f0;
        border-radius: 10px;
      }
    }


    .img-wrapper {
      column-count: 5;
      column-gap: 10px;
      counter-reset: count;
      width: 90vw;
      margin: 0 auto;
      margin-top: 50px;

      li {
        list-style: none;
        position: relative;
        margin-bottom: 10px;
      }

      img {
        width: 100%;
        height: auto;
        vertical-align: middle;
      }

    }
  }
}
</style>